<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../static/knockout-3.3.0.js">
	
</script>
</head>
<body>
	<!-- <h4>People</h4>
	<ul data-bind="foreach:people">
		<li>Name at position <span data-bind="text:$index"></span>:<span
			data-bind="text:name"></span> <a href="#"
			data-bind="click: $parent.removePerson">Remove</a> 			 <a href="#"
			data-bind="click:$parent.removePeople">delete</a>
		</li>
	</ul>

	<button data-bind="click:addPeople">add</button> -->

	<h4>People</h4>
	<ul data-bind="foreach: people">
		<li>Name at position <span data-bind="text: $index"> </span>: <span
			data-bind="text: name"> </span> <a href="#"
			data-bind="click: $parent.removePerson">Remove</a>
		</li>
	</ul>
	<button data-bind="click: addPerson">Add</button>

</body>

<script type="text/javascript">
	function appViewModel() {

		var self = this;

		self.people = ko.observableArray([ {
			name : 'Bert'
		}, {
			name : 'Charles'
		}, {
			name : 'Denise'
		} ]);

		self.addPerson = function() {
			self.people.push({
				name : "New at " + new Date()
			});
		};

		self.removePerson = function() {
			self.people.remove(this);
		}
	}
	/* 
	var self = this;
	self.people = ko.observableArray([ {
	name : 'roy'
	}, {
	name : 'today'
	} ]);
	self.addPeople = function() {
	self.people.push({
		name : "New at" + new Date()
	})
	};
	self.removePeople = function() {
	self.people.remove(this);
	}
	} */
	ko.applyBindings(appViewModel);
</script>


</html>